<!-- 添加角色 -->
<template>
  <div>
    <!-- <el-dialog
      title="创建角色"
      :visible.sync="addDialog"
      width="40%"
      :before-close="handleClose"
      size="mini"
    > -->
    <el-drawer title="新增角色" :visible.sync="addDialog" @close="handleClose">
      <el-form ref="roleForm" :model="roleForm" label-width="80px" size="mini">
        <el-form-item label="角色名称">
          <el-input v-model="roleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="授权标识">
          <el-input v-model="roleForm.auth"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="roleForm.type"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in types"
              :key="item.code"
              :label="item.remark"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="级别">
          <el-input-number
            v-model="roleForm.level"
            :min="0"
            :max="99"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group v-model="roleForm.enable">
            <el-radio
              v-for="item in enables"
              :key="item.code"
              :label="item.code"
              >{{ item.remark }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分配权限">
          <el-tabs @tab-click="handleClickPerm" name="api">
            <el-tab-pane label="菜单权限">
              <el-tree
                @check="handleCheckApiPerm"
                :data="apiPerms"
                show-checkbox
                node-key="id"
                :default-expanded-keys="[2, 3]"
                :default-checked-keys="[5]"
                :props="defaultProps"
              >
              </el-tree>
            </el-tab-pane>
            <el-tab-pane label="数据权限" name="data">
              <el-tabs
                tab-position="left"
                style="height: 200px"
                @tab-click="handleClickDataPerm"
                v-model="entityTypeCode"
              >
                <el-tab-pane
                  v-for="item in entities"
                  :key="item.code"
                  :label="item.remark"
                  :name="item.code + ''"
                >
                  <el-checkbox-group
                    v-model="item.dataPermList"
                    @change="handleModifyDataPerm"
                  >
                    <el-checkbox
                      v-for="dataPerm in dataPerms"
                      :key="dataPerm.id"
                      :label="dataPerm.id"
                      >{{ dataPerm.name }}</el-checkbox
                    >
                  </el-checkbox-group>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="roleForm.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAddSubmit" size="mini"
            >确定</el-button
          >
          <el-button @click="handleResetRoleForm" size="mini">重置</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
export default {
  props: {
    parents: {
      type: Array,
    },
    types: {
      type: Array,
    },
    enables: {
      type: Array,
    },
    apiPerms: {
      type: Array,
    },
    dataPerms: {
      type: Array,
    },
    entities: {
      type: Array,
    },
  },
  data() {
    return {
      addDialog: true,
      roleForm: {
        level: 0,
        enable: 1,
      },
      defaultProps: {
        id: "id",
        children: "children",
        label: "name",
      },
      entityTypeList: [],
      entityTypeCode: "",
      bindDataPerms: [],
      checkDataPerms: [],
    };
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * 关闭创建角色对话框
     */
    handleClose() {
      this.handleResetRoleForm();
      this.$emit("close");
    },
    /**
     * 提交创建角色
     */
    handleAddSubmit() {
      this.roleForm.dataPerms = this.checkDataPerms;
      this.$emit("submit", this.roleForm);
    },
    /**
     * 重置表单数据
     */
    handleResetRoleForm() {
      this.roleForm = {};
    },
    /**
     * 选中数据权限
     */
    handleCheckApiPerm(
      checkedNodes,
      checkedKeys,
      halfCheckedNodes,
      halfCheckedKeys
    ) {
      const checkKeys = [];
      checkKeys.push(...checkedKeys.halfCheckedKeys);
      checkKeys.push(...checkedKeys.checkedKeys);
      this.roleForm.apiPerms = checkKeys;
    },
    /**
     * 切换权限类型
     */
    handleClickPerm(val) {
      if (val.index == 0) {
        console.log("菜单权限");
      } else if (val.index == 1) {
        // 获取权限实体
        this.$emit("queryEntityType");
      }
    },
    /**
     * 选择数据权限类型
     */
    handleClickDataPerm() {
      this.$emit("queryEntity", this.entityTypeCode);
    },
    /**
     * 数据权限改变
     */
    handleModifyDataPerm(val) {
      const permDatum = {
        typeCode: this.entityTypeCode,
        entityIds: val,
      };

      let flag = true;
      for (let i = 0; i < this.checkDataPerms.length; i++) {
        if (this.checkDataPerms[i].typeCode == permDatum.typeCode) {
          this.checkDataPerms[i] = permDatum;
          flag = false;
          break;
        }
      }
      if (flag) this.checkDataPerms.push(permDatum);

      console.log(this.checkDataPerms);
    },
  },
};
</script>
<style>
.el-dialog__wrapper {
  top: -60px;
  z-index: 2009;
}

.el-form {
  padding-right: 10px;
}
</style>
